<!--<template>-->
  <!--<div class="role_manage">-->
    <!--&lt;!&ndash;搜索&ndash;&gt;-->
    <!--<div class="demo-input-suffix">-->
      <!--<el-input-->
        <!--placeholder="请输入角色名进行搜索"-->
        <!--v-model="searchInfo">-->
        <!--<i slot="prefix" class="el-input__icon el-icon-search"></i>-->
      <!--</el-input>-->
      <!--<el-button type="primary">搜索</el-button>-->
    <!--</div>-->


    <!--&lt;!&ndash;表格&ndash;&gt;-->

    <!--<el-row  class="titleBox">-->
      <!--<el-col :span="12"><div class="grid-content bg-purple leftBox">-->
        <!--共{{tableData.length}}个操作员-->

      <!--</div></el-col>-->
      <!--<el-col :span="12"><div class="grid-content bg-purple-light rightBox">-->
        <!--<el-button type="info" @click="goAdd">+新增操作员</el-button>-->
      <!--</div></el-col>-->
    <!--</el-row>-->

    <!--<el-table-->
      <!--:data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"-->
      <!--style="width: 100%"-->
      <!--class="user_manage_table">-->
      <!--<el-table-column-->
        <!--prop="name"-->
        <!--label="用户姓名"-->
        <!--width="150">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="userID"-->
        <!--label="用户名"-->
        <!--&gt;-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="date"-->
        <!--label="用户角色"-->
        <!--&gt;-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="stater"-->
        <!--label="状态"-->
        <!--width="120">-->
      <!--</el-table-column>-->
      <!--&lt;!&ndash;操作按钮&ndash;&gt;-->
      <!--<el-table-column label="操作"-->
                       <!--width="280">-->
        <!--<template slot-scope="scope">-->
          <!--<el-button-->
            <!--size="mini"-->
            <!--@click="handleLook(scope.$index, scope.row)">查看</el-button>-->
          <!--<el-button-->
            <!--size="mini"-->
            <!--@click="handleEdit(scope.$index, scope.row)">修改</el-button>-->
          <!--<el-button-->
            <!--size="mini"-->
            <!--type="danger"-->
            <!--@click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
          <!--<el-button-->
            <!--size="mini"-->
            <!--@click="handleEdit(scope.$index, scope.row)">重置密码</el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
    <!--</el-table>-->

    <!--&lt;!&ndash;分页&ndash;&gt;-->
    <!--<div class="block footerBox">-->
      <!--<el-pagination-->
        <!--@size-change="handleSizeChange"-->
        <!--@current-change="handleCurrentChange"-->
        <!--:current-page="currentPage"-->
        <!--:page-size="pagesize"-->
        <!--layout="total,  prev, pager, next, jumper"-->
        <!--:total="tableData.length">-->
      <!--</el-pagination>-->
    <!--</div>-->

  <!--</div>-->
<!--</template>-->

<!--<script>-->
  <!--export default {-->
    <!--data() {-->
      <!--return {-->
        <!--currentPage: 1,-->
        <!--searchInfo:'',-->
        <!--pagesize:5,-->
        <!--tableData: [{-->
          <!--id:2333,-->
          <!--date: '2016-05-02',-->
          <!--name: '王1虎',-->
          <!--userID:'jdk1',-->
          <!--stater: '正常'-->
        <!--}, {-->
          <!--id:2334,-->
          <!--date: '2016-05-04',-->
          <!--name: '王2虎',-->
          <!--userID:'jdk2',-->
          <!--stater: '正常'-->
        <!--}, {-->
          <!--id:2335,-->
          <!--date: '2016-05-01',-->
          <!--name: '王3虎',-->
          <!--userID:'jdk3',-->
          <!--stater: '异常'-->
        <!--}, {-->
          <!--id:2336,-->
          <!--date: '2016-05-03',-->
          <!--name: '王4虎',-->
          <!--userID:'jdk4',-->
          <!--stater: '正常'-->
        <!--}, {-->
          <!--id:2337,-->
          <!--date: '2016-05-03',-->
          <!--name: '王5虎',-->
          <!--userID:'jdk5',-->
          <!--stater: '正常'-->
        <!--}, {-->
          <!--id:2338,-->
          <!--date: '2016-05-03',-->
          <!--name: '王6虎',-->
          <!--userID:'jdk6',-->
          <!--stater: '正常'-->
        <!--}, {-->
          <!--id:2339,-->
          <!--date: '2016-05-03',-->
          <!--name: '王7虎',-->
          <!--userID:'jdk7',-->
          <!--stater: '正常'-->
        <!--}, {-->
          <!--id:2340,-->
          <!--date: '2016-05-03',-->
          <!--name: '王8虎',-->
          <!--userID:'jdk8',-->
          <!--stater: '正常'-->
        <!--}]-->
      <!--}-->
    <!--},-->
    <!--methods: {-->
      <!--handleEdit(index, row) {-->
        <!--this.$router.push({path: '/sys_management/user_manage_edit', query: {id: row.id}})-->
      <!--},-->
      <!--handleDelete(index, row) {-->
        <!--console.log(index, row);-->
        <!--this.tableData.splice(index, 1);-->
      <!--},-->
      <!--handleSizeChange(size) {-->
        <!--this.pagesize = size;-->
      <!--},-->
      <!--handleCurrentChange(currentPage) {-->
        <!--this.currentPage = currentPage;-->
      <!--},-->
      <!--/**-->
       <!--*-->
       <!--* 增加角色-->
       <!--* **/-->
      <!--goAdd() {-->
        <!--this.$router.push("/sys_management/add_user_manage")-->
      <!--},-->
      <!--/**-->
       <!--* 点击详情按钮-->
       <!--* @param index-->
       <!--* @param row-->
       <!--*/-->
      <!--handleLook(index, row){-->
        <!--this.$router.push({path: '/sys_management/user_manage_details', query: {id: row.id}})-->
      <!--}-->
    <!--},-->
    <!--created () {-->

    <!--}-->
  <!--}-->
<!--</script>-->

<!--<style>-->
  <!--.role_manage .el-table th{-->
    <!--text-align: center;-->
  <!--}-->
  <!--.role_manage .el-table td{-->
    <!--text-align: center;-->
  <!--}-->
  <!--.role_manage .el-input{-->
    <!--width: 250px;-->
    <!--margin-right: 20px;-->
  <!--}-->
  <!--.role_manage .el-input__inner{-->
    <!--height: 30px;-->
  <!--}-->
  <!--.role_manage .el-button{-->
    <!--height: 30px;-->
    <!--line-height: 0;-->
  <!--}-->
  <!--.role_manage .demo-input-suffix{-->
    <!--text-align: right;-->
    <!--background-color: #fff;-->
    <!--height: 60px;-->
    <!--line-height: 60px;-->
    <!--margin-bottom: 20px;-->
    <!--padding-right: 80px;-->
  <!--}-->
  <!--/*main .main-right{*/-->
  <!--/*background-color: #f2f4f8;*/-->
  <!--/*}*/-->
  <!--main{-->
    <!--border: none;-->
  <!--}-->
  <!--.role_manage .leftBox{-->
    <!--padding-left: 40px;-->
    <!--height: 100%;-->
    <!--line-height: 30px;-->
    <!--color: #5a5e66;-->
  <!--}-->
  <!--.role_manage .rightBox{-->
    <!--text-align: right;-->
    <!--padding-right: 80px;-->
  <!--}-->

  <!--.role_manage .el-pager li.active{-->
    <!--color: #fff;-->
    <!--background-color: #409EFF;-->
  <!--}-->
  <!--.role_manage .paginationBox{-->
    <!--background-color: #fff;-->
  <!--}-->
  <!--.role_manage .footerBox div{-->
    <!--text-align: right;-->
  <!--}-->
  <!--.role_manage .footerBox div .el-input{-->
    <!--width: 50px;-->
    <!--margin: 0 5px;-->

  <!--}-->
  <!--.footerBox{-->
    <!--width: 100%;-->
    <!--height: 50px;-->
    <!--background-color: #fff;-->
    <!-- -webkit-box-sizing: border-box;-->
    <!-- -moz-box-sizing: border-box;-->
    <!--box-sizing: border-box;-->
    <!--padding-top: 9px;-->
  <!--}-->
<!--</style>-->


<template>
  <div class="user_manage">
    <el-row class="table_search">
      <el-col :span="24">
        <template>
          <el-input
                    placeholder="请输入用户名进行搜索"
                    v-model="inputVar"
                    clearable>
          </el-input>
          <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
        </template>
      </el-col>
    </el-row>

    <el-row class="table_btn">
      <el-col :span="24" class="text-r">
        <el-button type="danger" @click="goAddUser('/sys_management/add_user')" icon="el-icon-plus">新增操作员</el-button>
      </el-col>
    </el-row>

    <template>
      <el-table
        size="mini"
        @row-click="goUserDetails"
        @cell-mouse-enter="userMouseEnterEvent"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="name"
          label="用户姓名"
          width="190">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="userMing"
          width="190">
        </el-table-column>
        <el-table-column
          align="center"
          width="190"
          prop="role"
          label="用户角色">
        </el-table-column>
        <el-table-column
          align="center"
          width="190"
          prop="state"
          label="用户状态">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary"  size="mini" @click="goUserEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="danger"  size="mini" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
            <el-button type="danger"  size="mini" @click="resetMima(scope.$index, scope.row)">重置密码</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="block footerBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </template>

  </div>
</template>

<script>

  export default {
    data: function (){
      return {
        inputVar: '',
        tableData: [
          {
            name: '王小虎',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          },
          {
            name: '小熊',
            userMing: 'wang',
            role: 'role',
            state: '正常'
          }
        ],
        currentPage: 1,
        pageSize:10
      }
    },
    methods: {
      handleSizeChange: function (size) {
        this.pageSize = size;
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
      },
      goUserDetails(row, event, column){
        if(column.label != '操作'){
          this.$router.push({path: '/sys_management/user_manage_details', query: {row: row}});
        }
        if(column.label == '操作'){
          return
        }
      },
      userMouseEnterEvent(row, event, column){
        if(event.label == '操作'){
          column.style.cursor="default"
        }
        if(event.label != '操作'){
          column.style.cursor="pointer"
        }
      },
      searchFun(){
        //请求接口返回数据
      },
      goAddUser(url){
        this.$router.push({path:url});
      },
      goUserEdit(){
        this.$router.push({path:'/sys_management/user_manage_edit'});
      },
      deleteRow(index, row) {
        var that = this;
        var indexing1 = index;
        this.$confirm('确认删除此角色吗？','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          that.tableData.splice(indexing1, 1)
          that.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(function () {
          that.$message({
            type: 'info',
            message: '已取消删除'
          });
        })

      },
      resetMima(index, row) {
        var that = this;
        this.$confirm('确认要重置密码吗？','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {

          that.$message({
            type: 'success',
            message: '重置成功!'
          });
        }).catch(function () {
          that.$message({
            type: 'info',
            message: '取消重置'
          });
        })

      }

    }
  }
</script>

<style scoped>
  .table_search, .table_btn{
    height: 60px;
    margin-bottom: 10px;
    background: #fff;
    padding: 10px 20px 30px;
  }
  .el-input{
    width: auto;
  }
  .text-r{
    text-align: right;
  }
  .footerBox {
    width: 100%;
    height: 50px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 9px;
    text-align: right;
  }
</style>

